<template>
  <div class="company-referrer-wrap">
    <div class="company-name-box">
      <div class="company-name-con">
        <span class="company-name-title">企业名称</span>
        <div class="company-name-value">
          <input type="text" class="content" placeholder="请输入企业名称" maxlength="25" v-model="companyName"/>
        </div>
      </div>
    </div>

    <div class="company-name-box">
      <div class="company-name-con">
        <span class="company-name-title">招聘岗位</span>
        <div class="company-name-value">
          <input type="text" class="content" placeholder="请输入招聘岗位" maxlength="25" v-model="companyPost"/>
        </div>
      </div>
    </div>

    <div class="company-item-content-box">
      <div class="item-content">
        <span class="item-content-title">企业地址</span>
        <x-address :title="title" v-model="companyAddress" :list="addressData" placeholder="请选择企业地址"
                   @on-hide="selectArea"
                   id="belongAddress" class="address-box"></x-address>

        <img src="../../images/in.png" class="pic3"/>
      </div>
    </div>

    <div class="company-address-detail-box">
      <div class="company-address-detail">
        <span class="company-address-title">详细地址</span>
        <div class="company-address-con">
          <textarea placeholder="请输入详细地址" class="company-detail" maxlength="25"
                    v-model="companyAddressDetail"></textarea>
        </div>
      </div>
    </div>

    <div class="brief-box">
      <span class="brief-title">企业说明：</span>
      <div class="brief-con">
        <textarea class="brief" v-model="companyBrief" placeholder="请简单介绍该企业的规模，生成产品等信息~" maxlength="280"></textarea>
      </div>
    </div>

    <div class="company-referrer-rule">
      <span class="referrer-rule-title">企业推荐说明：</span>
      <div class="referrer-rule-con">
        <p>1. 推荐企业必须真实可靠；</p>
        <p>2. 推荐人与推荐的企业已达成初步合作意向，由蓝聘平台派人进行合同签订，合同签订成功，则给推荐人推荐奖励；</p>
        <p>3. 推荐奖励的多少取决于推荐企业的好坏，并由蓝聘平台工作人员与推荐人进行线下沟通。</p>
      </div>
    </div>

    <div class="company-sure-btn-box">
      <button class="company-sure-text" type="button" @click="companyReferrer">确&nbsp;&nbsp;定</button>
    </div>

  </div>
</template>

<script>
  import {PopupPicker} from 'vux'
  import {ChinaAddressV4Data, XAddress} from 'vux'
  import {referrerJob} from "../../axios/api";

  export default {
    data() {
      return {
        title: '',
        addressData: ChinaAddressV4Data,
        companyAddress: [],
        companyAddressDetail: "",
        companyBrief: "",
        companyName: "",
        companyPost: ""
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      checkCompany(area) {
        if (this.companyName == "" || this.companyName == undefined || this.companyName == null) {
          this.$vux.toast.text("请输入企业名称", "middle");
          return;
        }
        if (this.companyPost == "" || this.companyPost == undefined || this.companyPost == null) {
          this.$vux.toast.text("请输入招聘岗位", "middle");
          return;
        }
        if (area == "" || area == undefined || area == null) {
          this.$vux.toast.text("请选择企业地址", "middle");
          return;
        }
        if (this.companyAddressDetail == "" || this.companyAddressDetail == undefined || this.companyAddressDetail == null) {
          this.$vux.toast.text("请输入详细地址", "middle");
          return;
        }
        if (this.companyBrief == "" || this.companyBrief == undefined || this.companyBrief == null) {
          this.$vux.toast.text("请简单介绍该企业的规模，生成产品等信息~", "middle");
          return;
        }
        return true;
      },
      companyReferrer() {//推荐
        let address = document.getElementById("belongAddress").innerText.substring(0, 7);
        let area = address == "请选择企业地址" ? "" : document.getElementById("belongAddress").innerText; //银行卡归属地
        if (this.checkCompany(area)) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let array = area.split(" ");
          if (array.length == 1) {
            this.companyAddress = array[0].replace('\n', "");
          } else {
            this.companyAddress = area.replace(/\s*/g, "");
          }

          let data = {
            "sgin": this.userMark,
            "mechanismName": this.companyName,
            "workPost": this.companyPost,
            "mechanismAddress": this.companyAddress,
            "extAddress": this.companyAddressDetail,
            "remark": this.companyBrief,
          };

          referrerJob(data).then((res) => {
            this.$vux.loading.hide();
            if (res.code == 0) {
              if (res.data == 1) {
                this.$router.push("/mine");
              } else {
                this.$vux.toast.text("推荐企业失败，请重试", "middle");
              }
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          });
        }
      },
      selectArea(type, value) {//选择企业地址
        if (type) {
          let array = value.split(" ");
          for (let i = 0; i < array.length; i++) {
            if (array[i] == "市辖区") {
              this.companyAddress.splice(1, i);
            }
          }
        }
      }
    },
    components: {
      PopupPicker,
      XAddress
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .company-referrer-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .company-name-box {
      .wh(100%, 1.333rem);
      background: #FFF;
      display: flex;
      .company-name-con {
        margin-left: 0.32rem;
        display: flex;
        align-items: center;
        width: 96.8%;
        border-bottom: 0.027rem solid #f2f2f2;
        .company-name-title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .company-name-value {
          margin-left: 0.467rem;
          height: 0.8rem;
          line-height: 0.8rem;
          .content {

            .size-color(0.427rem, #333);
          }
        }
      }
    }
    .company-item-content-box {
      .wh(100%, 1.333rem);
      background: #FFF;
      display: flex;
      .item-content {
        position: relative;
        margin-left: 0.32rem;
        display: flex;
        align-items: center;
        .wh(96.8%, 1.333rem);
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1);
        .item-content-title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .pic3 {
          margin-left: auto;
          margin-right: 0.32rem;
          .wh(0.32rem, 0.32rem);
        }
        .address-box {
          .ellipsis(53%);
          display: flex;
          padding-top: 0.1rem;
          padding-bottom: 0.1rem;
          margin-left: 0.467rem;
          .size-color(0.427rem, #333333)
        }
        .address-box /deep/ .weui-cell .vux-popup-picker-placeholder {
          color: #cccccc;
        }
        .address-box /deep/ .weui-cell .vux-popup-picker-value,.vux-cell-value {
          color: rgba(68, 68, 68, 1);
        }
        .address-box /deep/ .vux-tap-active {
          padding: 0;
          width: 100%;
        }
      }
    }
    .company-address-detail-box {
      display: flex;
      background: #FFF;
      .wh(100%, 1.84rem);
      .company-address-detail {
        display: flex;
        .wh(96.8%, 1.84rem);
        margin-left: 0.32rem;
        border-bottom: 0.027rem solid #f2f2f2;
        .company-address-title {
          padding-top: 0.48rem;
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .company-address-con {
          display: flex;
          align-items: flex-start;
          margin-left: 0.467rem;
          padding-top: 0.44rem;
          flex: 1;
          .company-detail {
            resize: none;
            border: none;
            flex: 1;
            margin-right: 0.32rem;
            .size-color(0.427rem, #333);
          }
        }
      }
    }
    .brief-box {
      display: flex;
      flex-direction: column;
      .wh(100%, 3.733rem);
      background: #FFF;
      .brief-title {
        margin-top: 0.467rem;
        margin-left: 0.4rem;
        .size-color(0.427rem, rgba(51, 51, 51, 1));
      }
      .brief-con {
        margin: 0.32rem auto 0;
        .wh(9.36rem, 1.973rem);
        background: #F5F5F5;
        .border-radius(0.08rem);
        .brief {
          .wh(9.04rem, 1.644rem);
          padding-left: 0.32rem;
          padding-top: 0.32rem;
          .size-color(0.373rem, rgba(51, 51, 51, 1));
          background: rgba(245, 245, 245, 1);
          border: none;
          resize: none;
        }
      }
    }
    .company-referrer-rule {
      display: flex;
      flex-direction: column;
      .wh(100%, auto);
      background: #F5F5F5;
      .referrer-rule-title {
        padding-top: 0.48rem;
        padding-bottom: 0.507rem;
        padding-left: 0.32rem;
        .size-color(0.427rem, rgba(60, 175, 255, 1));
      }
      .referrer-rule-con {
        width: 9rem;
        margin: 0 auto;
        padding-bottom: 1.2rem;
        p {
          .size-color(0.373rem, rgba(153, 153, 153, 1));
          line-height: 0.44rem;
        }
      }
    }
    .company-sure-btn-box {
      .wh(100%, 1.333rem);
      background: @talent-theme-bg-color;
      padding-bottom: 0.4rem;
      .company-sure-text {
        .fj(center, center);
        margin: 0 auto;
        .wh(9.04rem, 1.333rem);
        background: rgba(60, 175, 255, 1);
        border-radius: 0.107rem;
        .size-color(0.48rem, rgba(255, 255, 255, 1));
      }
    }
  }
</style>
